<template>
    <div class="equipmentConsume-wrapper">
        <div class="title">
            <span class="num">3160</span>
            <div class="name" style="width: 300px; height: 20px;">{{ title }}</div>
        </div>
        <div :id="name"></div>
    </div>
</template>

<script  lang="ts">
import { onMounted, ref, onUpdated } from 'vue';
import { Chart } from '@antv/g2';
import { defineComponent } from 'vue';
export default defineComponent({

    props: {
        data: Array,
        title: String,
        name: String
    },

    setup(props: any) {
        console.log(props.data,'qq'); 
        
        // 器材消耗
        const equipmentConsumeList = [
            { year: '周一', quantity: 154 },
            { year: '周二', quantity: 0 },
            { year: '周三', quantity: 100 },
            { year: '周四', quantity: 174 },
            { year: '周五', quantity: 170 },
            { year: '周六', quantity: 310 },
            { year: '周日', quantity: 200 },
        ]
        onMounted(() => {
            const chart = new Chart({
                container: props.name,
                autoFit: true,
                height: 150,
            });

            chart.data(equipmentConsumeList);
            chart.scale({
                value: {
                    min: 100,
                    nice: true,
                },
                year: {
                    range: [0, 1,]
                },
            });
            chart.tooltip({
                showCrosshairs: false,
                shared: true,
            });

            chart.axis('quantity', {
                label: {
                    formatter: (val) => {
                        return (+val / 1);
                    },
                },
            });

            chart.area().position('year*quantity');
            chart.line().position('year*quantity');

            chart.render();
        })

    }
});
</script>

<style scoped>

</style>